<!--
 * @Author: byron
 * @Date: 2021-09-26 08:15:58
 * @LastEditTime: 2021-10-07 09:05:42
-->
<template>
    <div class="playlist-card" @click="onclick">
        <div class="img-warp">
            <img alt="" v-lazy="$utils.genImgURL(img, 300)" />
            <div class="desc-warp">
                <p>{{ desc }}</p>
            </div>
            <PlayIcon class="com-play-icon" />
        </div>
        <p style="font-size:14px">{{ name }}</p>
    </div>
</template>

<script>
export default {
    components: {},
    props: ['img', 'name', 'desc', 'id'],
    data() {
        return {}
    },
    watch: {},
    computed: {},
    methods: {
        onclick() {
            this.$router.push({ path: `/play/${this.id}` })
        },
    },
    created() {},
    mounted() {},
}
</script>
<style lang="scss" scoped>
.playlist-card {
    position: relative;
    width: calc(20% - 8px);
    cursor: pointer;
    margin: 4px;
    margin-bottom: 32px;

    .img-warp {
        position: relative;
        width: 100%;
        padding-top: 100%;
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 6px;

        img {
            @include abs-stretch;
            width: 100%;
            height: 100%;
        }

        .desc-warp {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            padding: 6px;
            background-color: rgba(0, 0, 0, 0.4);
            transform: translateY(-100%);
            transition: all 0.5s;

            p {
                color: #fff;
                text-align: center;
            }
        }

        .com-play-icon {
            opacity: 0;
            position: absolute;
            bottom: 2px;
            right: 2px;
            transition: all 0.5s;
        }

        &:hover {
            .desc-warp {
                transform: translateY(0);
            }

            .com-play-icon {
                opacity: 1;
            }
        }
    }

    p {
        @include text-ellipsis;
    }
}
</style>
